<template>
	<view class="contariner">
		<block v-for="(item, index) in selfKY" :key="index">
			<view class="content">
				<view class="avatar">
					<image :src="item.avatarUrl" mode="widthFix"></image>
				</view>
				<view class="nickname">
					{{item.nickName}}
				</view>
				<view class="online-time">
					<text class="iconText iconfont icon-shijian01"> </text>
					<text space="emsp" decode>{{item.onlineTime | formateTime}}</text>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {SocketSelf} from '@/model/socketSelf.js';
	export default {
		data() {
			return {
				selfKY:[],
				selfKYIndex:-1,
				intervalIndex:0
			}
		},
		onLoad() {
			this.$store.socketKY = new SocketSelf(this.$store.user.uid,4,this)
			this.$store.socketKY.initSocketTask(this)
			console.log(this.selfKYIndex)
			let i = 0;
			this.intervalIndex = setInterval(()=>{
				this.selfKYIndex = this.selfKY.findIndex(item=>item.uid == this.$store.user.uid)
				if(this.selfKYIndex != -1){
					this.selfKY[this.selfKYIndex].onlineTime += 1
					i += 1
					if(i >= 60){
						this.$store.socketKY.sockSend({
							messageType:1,
							uid:this.$store.user.uid,
							roomType:1,
							onLineTime:this.selfKY[this.selfKYIndex].onlineTime
						})
						i = 0
					}
				}
			},1000)
		},
		filters:{
			formateTime(result){
				let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
				let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
				let s = Math.floor(result % 60) < 10 ? '0' + Math.floor(result % 60) : Math.floor(result % 60);
				return result > 3600 ? " " + h + ":" + m + ":" + s : m + ":" + s; 
			}
		},
		onUnload() {
			this.$store.socketKY.sockSend({
				messageType:2,
				uid:this.$store.user.uid,
				roomType:1
			})
			this.$store.socketKY.sockClose()
			clearInterval(this.intervalIndex)
		},
		methods: {
			formateTime(e){
				return this.$utils.formatTime(e)
			}
		}
	}
</script>

<style>
	page{
		background-color: #333;
	}
</style>
<style lang="scss" scoped>
	.contariner{
		display: flex;
		align-items: center;
		.content{
			margin: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.avatar{
				width: 100rpx;
				image{
					width: 100rpx;
					border-radius: 50%;
				}
			}
			.nickname{
				color: #FFF;
				font-size: 30rpx;
				margin: 10rpx 0;
			}
			.online-time{
				color: #FFFFFF;
				font-size: 26rpx;
				.iconText{
					color: #09BB07;
				}
			}
		}
	}
</style>
